<template>
  <div class="c-pb100">
    <!-- 已经删除 -->
    <div v-if="wordInfo.status == -1">
      <loading-status-tem :noData="wordInfo.length != 0" :noDataText="'该词典已删除,请联系管理员!'"></loading-status-tem>
      <p class="c-flex-row c-justify-center">
        <span
          @click="goIndex"
          class="c-bg-mgreen c-inlineblack c-fc-white c-br50 c-ph20 c-pv10 c-fs20"
        >返回首页</span>
      </p>
    </div>
    <!-- 下架 -->
    <div v-if="wordInfo.status == -2">
      <loading-status-tem :noData="wordInfo.length != 0" :noDataText="'该词典已下架,请联系管理员!'"></loading-status-tem>
      <p class="c-flex-row c-justify-center">
        <span
          @click="goIndex"
          class="c-bg-mgreen c-inlineblack c-fc-white c-br50 c-ph20 c-pv10 c-fs20"
        >返回首页</span>
      </p>
    </div>

    <div v-if="wordInfo.status > 0">
      <section class="c-p c-maxh427 c-text-hidden">
        <img :src="$addXossFilter(wordInfo.poster, require('../../../assets/defult270.png'))" alt class="c-w100">
      </section>
      <section class="c-bd-b10 c-bg-white">
        <div class="c-ph24 c-p c-flex-column c-lh c-pv30">
          <div class="c-fs30 c-fw-b c-fc-xblack c-lh48">{{wordInfo.name}}</div>
          <div class="c-fs20 c-fc-gray c-mt20" v-if="wordInfo.intro">{{wordInfo.intro}}</div>
          <div class="c-fs20 c-fc-sblack c-pt30">
            <span>共{{wordInfo.wordCount}}词</span>
            <span class="c-ph10">|</span>
            <span>{{wordInfo.orderCount}}人使用</span>
            <!-- priceModuleStatus 价格模式 -1基础模式  1高级模式 -->
            <span class="theme-fc c-ml16" v-if="wordInfo.isOrder == true || Number(wordInfo.price) == 0 || (wordInfo.userVipType == 2 && Number(wordInfo.vipDiscount) == 0) || (wordInfo.userVipType == 4 && (Number(wordInfo.svipDiscount) == 0 || (Number(wordInfo.vipDiscount) == 0 && wordInfo.priceModuleStatus == -1))) || ((wordInfo.userVipType == 3 || wordInfo.userVipType > 4) && wordInfo.commonProdInfo && wordInfo.commonProdInfo.isAgent == 1 && Number(wordInfo.commonProdInfo.agentDiscount) == 0)">
              <span v-if="Number(wordInfo.price) != 0">{{'￥' | iosPriceFilter}}</span>
              <span>{{Number(wordInfo.price) == 0 ? '免费' : Number(wordInfo.price).toFixed(2)}}</span>
            </span>
          </div>
          <price-bar class="c-pt30 c-ph0" v-if="!(wordInfo.isOrder == true || Number(wordInfo.price) == 0 || (wordInfo.userVipType == 2 && Number(wordInfo.vipDiscount) == 0) || (wordInfo.userVipType == 4 && (Number(wordInfo.svipDiscount) == 0 || (Number(wordInfo.vipDiscount) == 0 && wordInfo.priceModuleStatus == -1))) || ((wordInfo.userVipType == 3 || wordInfo.userVipType > 4) && wordInfo.commonProdInfo && wordInfo.commonProdInfo.isAgent == 1 && Number(wordInfo.commonProdInfo.agentDiscount) == 0))"
            :dataInfo="wordInfo"
          >
          </price-bar>
        </div>
        <!-- 积分及会员，大转盘，vip入口优惠提示 -->
        <discount-tip
          :vipDiscount="wordInfo.vipDiscount"
          :svipDiscount="wordInfo.svipDiscount"
          :deductiblePoints="wordInfo.deductibleAmount"
          :sales="wordInfo.sales"
          :isFriendHelper="wordInfo.isFriendHelper"
          :couponList="couponList"
          @clickShowCoupon="showCoupon = true"
          :isiOS='isiOS'
          :hasPermission='wordInfo.isOrder == true || Number(wordInfo.price) == 0 || (wordInfo.userVipType == 2 && Number(wordInfo.vipDiscount) == 0) || (wordInfo.userVipType == 4 && (Number(wordInfo.svipDiscount) == 0 || (Number(wordInfo.vipDiscount) == 0 && wordInfo.priceModuleStatus == -1))) || ((wordInfo.userVipType == 3 || wordInfo.userVipType > 4) && wordInfo.commonProdInfo && wordInfo.commonProdInfo.isAgent == 1 && Number(wordInfo.commonProdInfo.agentDiscount) == 0)'
          :showDiscount="showDiscount"
          v-if="Number(wordInfo.price) > 0"
        ></discount-tip>
      </section>
      <section>
        <div class="c-ph24">
          <div @click="clickDesc" class="c-fs24 c-fc-gray c-mt20 c-ww-bw c-ww-ba c-contexty-scroll" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '',hasShowMore && !showAllContent ? 'c-text-hidden':'']" v-html="wordInfo.desc"></div>
        </div>
      </section>
      <bottom-buy-com :ckFrom="56" :isNeedPay="!wordInfo.isOrder && wordInfo.payType == 2" :showBuyButton="!((wordInfo.userVipType == 2 && Number(wordInfo.vipDiscount) == 0) || (wordInfo.userVipType == 3 || wordInfo.userVipType == 4 || wordInfo.userVipType == 5 || wordInfo.userVipType == 6) && (Number(wordInfo.svipDiscount) == 0 || Number(wordInfo.vipDiscount) == 0)) && wordInfo.isOrder == false && Number(wordInfo.price) > 0">
        <div class="c-fc-white theme-bg c-w100 c-hh64 c-br36 c-pv16 c-flex-row c-flex-center c-lh c-fs24" v-if="wordInfo.isOrder == true || Number(wordInfo.price) == 0 || (wordInfo.userVipType == 2 && Number(wordInfo.vipDiscount) == 0) || (wordInfo.userVipType == 4 && (Number(wordInfo.svipDiscount) == 0 || (Number(wordInfo.vipDiscount) == 0 && wordInfo.priceModuleStatus == -1))) || ((wordInfo.userVipType == 3 || wordInfo.userVipType > 4) && wordInfo.commonProdInfo && wordInfo.commonProdInfo.isAgent == 1 && Number(wordInfo.commonProdInfo.agentDiscount) == 0)" @click="detail(wordInfo.dId)">查看词典</div>
        <div class="c-fc-white theme-bg c-w100 c-hh64 c-br36 c-flex-row c-flex-center c-hh64 c-fs24" v-else-if="wordInfo.isOrder == false && Number(wordInfo.price) > 0" @click="clickBuy">立即购买</div>
      </bottom-buy-com>
    </div>
    <coupon-list-com
      @closeModal="closeModal"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :serviceName="wordInfo.commonProdInfo && wordInfo.commonProdInfo.isAgent == 1 ? wordInfo.commonProdInfo.agentName : ''"
      :serviceDiscount="wordInfo.commonProdInfo && wordInfo.commonProdInfo.isAgent == 1 && wordInfo.commonProdInfo.agentDiscount ? wordInfo.commonProdInfo.agentDiscount : 100"
      :vipDiscount="wordInfo.vipDiscount"
      :svipDiscount="wordInfo.svipDiscount"
      :deductiblePoints="Number(wordInfo.deductibleAmount)"
      :originPrice="Number(wordInfo.price)"
      :prodId="Number(wordId)"
      :prodType="56"
    ></coupon-list-com>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import DiscountTip from "@/components/templates/common/discountTip.vue";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import PriceBar from '@/components/templates/common/priceBar.vue';
import couponListCom from "@/components/templates/couponListCom.vue";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
let dId = "";
export default {
  name: "wordDetail",
  components: {
    loadingStatusTem,
    DiscountTip,
    BottomBuyCom,
    PriceBar,
    couponListCom
  },
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      wordInfo: "",
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      isFromInvite: "",
      hasShowMore: false,
      showAllContent: false,
      orderId: 0,
      status: 1,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      showCoupon: false,
      wordId: "",
      bindPhoneSetting: null
    };
  },
  computed: {
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.wordInfo.isSaleOnly != 0 && !(this.wordInfo.isOrder == true || Number(this.wordInfo.price) == 0 || (this.wordInfo.userVipType == 2 && Number(this.wordInfo.vipDiscount) == 0) || (this.wordInfo.userVipType == 4 && (Number(this.wordInfo.svipDiscount) == 0 || (Number(this.wordInfo.vipDiscount) == 0 && this.wordInfo.priceModuleStatus == -1))) || ((this.wordInfo.userVipType == 3 || this.wordInfo.userVipType > 4) && this.wordInfo.commonProdInfo && this.wordInfo.commonProdInfo.isAgent == 1 && Number(this.wordInfo.commonProdInfo.agentDiscount) == 0)) && Number(this.wordInfo.price) > 0 && !this.wordInfo.isFriendHelper &&
      ((this.wordInfo.sales != null && this.isSalesBegin == false) || this.wordInfo.collage != null || (this.wordInfo.collage == null && this.wordInfo.sales == null))
      return showdiscount
    },
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    closeModal() {
      this.showCoupon = false;
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + dId + '&redeemType=94&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = $this.couponList.concat(res.data);
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    clickDesc(e) {
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src] // 需要预览的图片http链接列表
        });
      }
    },
    getWordDetail() {
      utilJs.getMethod(global.apiurl + "dictionary/getDetail/" + dId + "?isSkeleton=1", res => {
        this.wordInfo = res;
        this.wechatShare();
      });
    },
    //点击购买
    clickBuy() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/course/coursePay",
        query: {
          extId: dId,
          ckFrom: global.ckFrom.word,
          cId: -1,
          isFromInvite: 0
        }
      });
    },
    detail(dId) {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      let data = {
        dId: dId,
        orderId: this.orderId,
        status: this.status
      }
      if (this.wordInfo.isOrder == false) {
        // 1 ：普通用户  2：VIP  3：代理商  4：svip  5：合伙人  6：分公司
        // (基础价格模式下，svip才会在vip折扣和svip折扣中取最低值，也就是基础价格模式下，当vip折扣为0时，svip必定有权限)
        let vip = ((this.wordInfo.userVipType == 2 || this.wordInfo.userVipType == 3 || (this.wordInfo.userVipType == 4 && this.wordInfo.priceModuleStatus == -1) || this.wordInfo.userVipType == 5 || this.wordInfo.userVipType == 6) && Number(this.wordInfo.vipDiscount) == 0);
        let svip = ((this.wordInfo.userVipType == 4 || this.wordInfo.userVipType == 3 || this.wordInfo.userVipType == 5 || this.wordInfo.userVipType == 6) && Number(this.wordInfo.svipDiscount) == 0)
        let allUsers = ((this.wordInfo.userVipType == 1 || this.wordInfo.userVipType == 2 || this.wordInfo.userVipType == 3 || this.wordInfo.userVipType == 4 || this.wordInfo.userVipType == 5 || this.wordInfo.userVipType == 6) && Number(this.wordInfo.price) == 0)
        if (svip || vip || allUsers) {
          utilJs.postMethod(global.apiurl + 'dictionary/setOrder', data, res => {
          });
        }
      }
      this.$routerGo(this, "push", {
        path: "/homePage/word/wordQuery",
        query: {
          extId: dId
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = this.wordInfo.name;
      let shareImg = this.wordInfo.poster;
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/word/wordDetail?dId=" +
        dId +
        "&refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = this.wordInfo.intro || "点击查看详情";
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      localStorage.setItem("wordShareInfo", JSON.stringify(shareData));
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      var title = this.wordInfo.name;
      var shareImg = this.wordInfo.liveCover;
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/word/wordDetail?dId=" +
        dId +
        "&refereeId=" +
        localStorage.getItem("userId");
      var shareDesc = this.wordInfo.intro || "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //返回首页
    goIndex() {
      this.$routerGo(this, "replace", {
        path: "/"
      });
    },
    initData() {}
  },
  activated() {
    setDocumentTitle("词典详情"); // eslint-disable-line
    dId = this.$route.query.dId;
    this.wordId = dId;
    getBindPhoneSetting(global.ckFrom.word).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getWordDetail();
    this.getCouponList();
    this.showAllContent = false;
    this.hasShowMore = false;
    sessionStorage.removeItem('search');
  }
};
</script>

<style scoped>
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>